<template>
    <div>
        <!--存放图片的盒子-->
        <div class="cover">
            <img ref="cover" @click="onSelectCover" :src="value">
        </div>
        <!--弹出框-->
        <el-dialog
                title="封面选择"
                :visible.sync="dialogMaterialVisible"
                :append-to-body="true"
                custom-class="dialog"
                center
        >
            <el-tabs v-model="activeName" type="card">

                <!--素材选择-->
                <el-tab-pane label="素材选择" name="1">
                    <material :isShowUpload="false"
                              :isShowHandle="false"
                              :isShowPreview="false"
                              isShowSelected
                              ref="material"
                    />
                </el-tab-pane>
                <!--本地上传-->
                <el-tab-pane label="本地上传" name="2" class="localUpload">
                    <!--<label for="file">
                        <el-avatar
                                shape="square"
                                :size="140"
                                fit="cover"
                                :src="previewImage"
                                class="avatar-pic"
                        >
                        </el-avatar>
                    </label>-->
                    <el-avatar
                            shape="square"
                            :size="140"
                            fit="cover"
                            :src="previewImage"
                            class="avatar-pic"
                    ></el-avatar>
                    <input
                            type="file"
                            id="file"
                            ref="file"
                            style="display: block"
                            class="fileInput"
                            @change="onFileChange"
                    >

                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ImageSelected">确 定</el-button>
                <el-button @click="dialogMaterialVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import material from "../../materialManage/components/material";

    export default {
        name: "publish-cover",
        data() {
            return {
                dialogMaterialVisible:false,
                activeName:'1',
                previewImage:'',//预览图片url
                coverList:[],
            }
        },
        props:['value'],
        created() {},
        components:{material},
        methods: {
            //选择图片框被点击
            onSelectCover(){
                this.dialogMaterialVisible = true
            },

            //input[file]事件触发
            onFileChange(){
                let file = this.$refs['file']
                let imageUrl = window.URL.createObjectURL(file.files[0])
                console.log(imageUrl);
                this.previewImage = imageUrl
            },

            //点击选择按钮
            ImageSelected(){
                //this.activeName=1为从素材库选择图片，=2为从本地选择图片
                if (this.activeName === '1'){
                    let img_index = this.$refs['material'].selected
                    let img = this.$refs['material'].img[img_index]
                    this.$emit('input',img.img_url)
                    this.dialogMaterialVisible = false//点击确定后关闭dialog
                } else if (this.activeName === '2'){
                    if(!this.$refs['file'].value){
                        return this.$message({
                            type: 'warning',
                            message: '请传入图片'
                        });
                    }
                    this.$confirm('确认上传图片?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$emit('input',this.previewImage)
                        this.dialogMaterialVisible = false//点击确定后关闭dialog
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消修改'
                        });
                    })
                }

            },

        }
    }
</script>

<style scoped lang="scss">
    .cover{
        height: 110px;
        width: 110px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        padding: 2px;
        margin-right: 10px;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .localUpload{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .fileInput{
            margin-top: 20px;
            display: block;
            background: #837fee;
            border-radius: 10px;
            border: 2px solid skyblue;
        }
    }
</style>
